<script setup lang='ts'>
    import {onMounted, ref} from 'vue'
    import * as echarts from 'echarts'
    const charts = ref<any>()
        onMounted(() => {
        // 获取echarts实例
        const mycharts = echarts.init(charts.value)
        mycharts.setOption({
            // 标题组件
            title: {
                // 主标题
                text: '景区排行',
                link: 'http://www.baidu.com',
                // 标题的位置
                left: '50%',
                // 主标题文字样式
                textStyle: {
                    color: 'yellowgreen',
                    fontSize: 20
                },
                // 子标题
                subtext: '各大景区排行',
                subtextStyle: {
                    color: 'yellowgreen',
                    fontSize: 16
                }
            },
            // x,y轴组件
            xAxis: {
                type: 'category', // 图形再x轴均匀分布展示
            },
            yAxis: {
                // 不要分割线
                splitLine: {
                    show: false
                },
                 // 轴线设置
                 axisLine: {
                    show: true
                },
            },
            grid: {
                left: 20,
                bottom: 20,
                right: 20
            },
            // 系列
            series: [
                {
                    type: 'bar',
                    data: [10, 20, 30, 40, 50, 60, 80],
                    // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    label: {
                        show: true,
                        // 文字位置
                        position: 'insideTop',
                        color: 'yellowgreen'
                    },
                    // 是否显示柱条的背景色。通过 backgroundStyle 配置背景样式
                    showBackground: true,
                    backgroundStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'black'
                                },
                                {
                                    offset: 1,
                                    color: 'blue'
                                }
                            ],
                            global: false
                        },
                        
                    },
                    itemStyle: {
                        borderRadius: [10, 10, 0, 0],
                        //柱条颜色
                        color: function (data: any) {
                            //给每一个柱条这是背景颜色
                            let arr = [
                                'red',
                                'orange',
                                'yellowgreen',
                                'green',
                                'purple',
                                'hotpink',
                                'skyblue',
                            ]
                            return arr[data.dataIndex]
                        },
                    },
                },
                
                
                {
                    type: 'line',
                    data: [10, 20, 30, 40, 50, 60, 90],
                    smooth: true, //平滑曲线
                },
            ],
            // 提示框
            tooltip: {
                // backgroundColor: 'rgba(50, 50, 50, .6)'
            }
        })
    })
</script>


<template>
    <div class="box6">
        <div class="title">
            <Title ref="charts" title="热门景区排行"></Title>
        </div>
        <div ref="charts" class="charts"></div>
    </div>
</template>


<style scoped lang='scss'>
    .box6{
        width: 100%;
        height: 100%;
        background: url('@/views/screen/images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        margin: 10px 0;
        .charts{
            height: calc(100% - 30px);
        }
    }
</style>